<template>
  <div class="addMech-Container">
    <!-- <el-dialog title="新增机构" width="30%"> -->
    <!-- :rules="rules" -->
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      label-width="140px"
      class="demo-ruleForm"
    >
      <el-form-item label="昵称" prop="nikename">
        <el-input v-model="ruleForm.nikename" placeholder="请输入昵称"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model.number="ruleForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="开户银行" prop="bankName">
        <el-input v-model="ruleForm.bankName" placeholder="请输入开户银行"></el-input>
      </el-form-item>
      <el-form-item label="开户银行账号" prop="bcardNo">
        <el-input v-model.number="ruleForm.bcardNo " placeholder="请输入开户行账号"></el-input>
      </el-form-item>
      <el-form-item label="机构名称" prop="mechanismName">
        <el-input v-model="ruleForm.mechanismName" placeholder="请输入机构名称"></el-input>
      </el-form-item>
      <el-form-item label="法定代表人名称" prop="name">
        <el-input v-model="ruleForm.name " placeholder="请输入机构的 法定代表人名称"></el-input>
      </el-form-item>
      <el-form-item label=" 开户许可证" prop="permission">
        <!-- <el-input v-model="ruleForm.permission" placeholder="请输入 开户许可证"></el-input> -->
        <el-upload
          list-type="picture-card"
          action="http://mov.freebd.cn:808/img/upload"
          :file-list="fileList0"
          :on-success="onSuccess0"
          :on-remove="onRemove0"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="营业执照" prop="businessLicence">
        <el-upload
          list-type="picture-card"
          action="http://mov.freebd.cn:808/img/upload"
          :file-list="fileList1"
          :on-success="onSuccess1"
          :on-remove="onRemove1"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="法人身份证正面照" prop="idcard">
        <el-upload
          list-type="picture-card"
          action="http://mov.freebd.cn:808/img/upload"
          :file-list="fileList3"
          :on-success="onSuccess3"
          :on-remove="onRemove3"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

            <el-form-item label="法人身份证背面照" prop="idback">
        <el-upload
          list-type="picture-card"
          action="http://mov.freebd.cn:808/img/upload"
          :file-list="fileList2"
          :on-success="onSuccess2"
          :on-remove="onRemove2"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <div style="text-align:right;">
        <el-button @click="Cancel()">取 消</el-button>
        <el-button type="primary" @click="AddClick('ruleForm')">确 定</el-button>
      </div>
    </el-form>
    <!-- </el-dialog> -->
  </div>
</template>
<script>
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      } else if (!Number.isInteger(value)) {
        return callback(new Error("请输入数字"));
      } else if (String(value).length != 11) {
        return callback(new Error("请输入11位电话号码"));
      } else {
        callback();
      }
    };
    var checkbcardNo = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("银行卡号不能为空"));
      } else if (!Number.isInteger(value)) {
        return callback(new Error("请输入数字"));
      } else if (String(value).length > 25) {
        return callback(new Error("输入卡号有误"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        bankName: "",
        bcardNo: "", //19位
        businessLicence: "", //
        idback: "", //
        idcard: "", //
        mechanismName: "",
        name: "",
        nikename: "",
        permission: "",
        phone: ""
      },
      rules: {
        bankName: [
          { required: true, message: "请输入开户银行", trigger: "blur" },
          { min: 1, max: 20, message: "输入内容过长", trigger: "blur" }
        ],
        //19位
        bcardNo: [{ validator: checkbcardNo, required: true, trigger: "blur" }],
        businessLicence: [
          { required: true, message: "请上传营业执照", trigger: "blur" }
        ],
        idback: [
          { required: true, message: "请上传法人身份证背面照", trigger: "blur" }
        ],
        idcard: [
          { required: true, message: "请上传法人身份证正面照", trigger: "blur" }
        ],
        mechanismName: [
          { required: true, message: "请机构名称", trigger: "blur" },
          { min: 1, max: 20, message: "输入内容过长", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入法定代表人名称", trigger: "blur" },
          { min: 1, max: 20, message: "输入内容过长", trigger: "blur" }
        ],
        nikename: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 1, max: 20, message: "输入内容过长", trigger: "blur" }
        ],
        permission: [
          { required: true, message: "请上传开户许可证", trigger: "blur" }
        ],
        phone: [{ validator: checkPhone, required: true, trigger: "blur" }]
      },
      fileList0: [],
      fileList1: [],
      fileList2: [],
      fileList3: []
    };
  },
  created() {},
  methods: {
    Cancel() {
      this.ruleForm = {};
      this.fileList0 = [];
      this.fileList1 = [];
      this.fileList2 = [];
      this.fileList3 = [];
      this.$router.push("/mech");
    },
    //图片上传
    onSuccess0(Response, file, fileList) {
      this.ruleForm.permission = file.response.data.path;
    },
    onSuccess1(Response, file, fileList) {
      this.ruleForm.businessLicence = file.response.data.path;
    },
    onSuccess2(Response, file, fileList) {
      this.ruleForm.idback = file.response.data.path;
    },
    onSuccess3(Response, file, fileList) {
      this.ruleForm.idcard = file.response.data.path;
    },
    //删除
    onRemove0(file, fileList) {
      this.ruleForm.permission = "";
      this.fileList0 = [];
    },
    onRemove1(file, fileList) {
      this.ruleForm.businessLicence = "";
      this.fileList1 = [];
    },
    onRemove2(file, fileList) {
      this.ruleForm.idback = "";
      this.fileList2 = [];
    },
    onRemove3(file, fileList) {
      this.ruleForm.idcard = "";
      this.fileList3 = [];
    },
    //新增机构
    AddClick(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = "/user/newUser";
          let params = {
            bankName: this.ruleForm.bankName,
            bcardNo: this.ruleForm.bcardNo,
            businessLicence: this.ruleForm.businessLicence,
            idback: this.ruleForm.idback,
            idcard: this.ruleForm.idcard,
            mechanismName: this.ruleForm.mechanismName,
            name: this.ruleForm.name,
            nikename: this.ruleForm.nikename,
            permission: this.ruleForm.permission,
            phone: this.ruleForm.phone
          };
          this.httpPost(url, params, res => {
            if (res.code == 200) {
              this.$message({
                message: "新增成功",
                type: "success"
              });
              setTimeout(()=>{
                  this.$router.push("/mech");
              },1000)
              this.ruleForm = {};
              this.fileList0 = [];
              this.fileList1 = [];
              this.fileList2 = [];
              this.fileList3 = [];
            } else {
              this.$message({
                message: "新增失败",
                type: "warning"
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.addMech-Container {
  width: 50%;
}
</style>

<style lang="">
.addMech-Container .el-form-item__label {
  text-align: justify !important;
}
</style>